<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>测试 - layui</title>
    <script src="js/jquery.js"></script>
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script>
        currentPage = 1;
        // 删除员工
        function deleteEmp(id) {
            if (confirm('你确定要删除吗')) {
                $.ajax({
                    url: '/base/emp/delete?id=' + id,
                    type: 'post',
                    dataType: 'JSON',
                    success: function (data) {
                        if (data && data > 0) {
                            alert('删除成功');
                            togglePage(currentPage);
                        } else {
                            alert('删除失败');
                        }
                    }
                })
            }
        }

        //修改按钮
        function updateEmp(id) {
            layer.open({
                type: 2,
                area: ['400px', '300px'],
                content: '/base/update.html?id=' + id,
                end: function () {
                    togglePage(currentPage);
                }
            });
        }

        <!--切换页码-->
        function togglePage(pageNum) {
            //    发送请求，获取数据
            currentPage = pageNum;
            $.ajax({
                url: '/base/emp/list',
                type: 'get',
                data: {
                    'pageNum': pageNum
                },
                dataType: 'JSON',
                success: function (data) {
                    if (data) {
                        var total = data.total;
                        var totalPage = data.totalPage;
                        var curPage = data.page;
                        var employees = data.employees;
                        var employeesDiv = '';
                        for (var i = 0; i < employees.length; i++) {
                            var item = employees[i];
                            var name = item.name;
                            var sex = item.sex;
                            var age = item.age;
                            var id = item.id;
                            sex = sex == 1 ? '男' : '女';
                            employeesDiv += '        <tr>\n' +
                                '            <td><input type="checkbox" name="id" value=\"' + id + '\"></td>\n' +
                                '            <td>' + id + '</td>\n' +
                                '            <td>' + name + '</td>\n' +
                                '            <td>' + age + '</td>\n' +
                                '            <td>' + sex + '</td>\n' +
                                '            <td>\n' +
                                '                <button type="button" class="layui-btn" onclick="updateEmp(' + id + ')">修改</button>\n' +
                                '                <button type="button" class="layui-btn layui-btn-danger" onclick="deleteEmp(' + id + ')">删除</button>\n' +
                                '            </td>\n' +
                                '        </tr>\n';
                        }
                        var pagination = '';
                        for (var j = 1; j <= totalPage; j++) {
                            var active = j == curPage ? 'active' : '';
                            console.log(active);
                            pagination += '<li class=\"' + active + '\"><a href="#" onclick="togglePage(' + j + ')">' + j + '</a></li>';
                        }

                        $("#employeesDiv").html(employeesDiv);
                        $(".pagination").html(pagination);
                    } else {
                        alert('暂无数据');
                    }
                }
            })
        }

        $(function () {
            //    入口函数
            togglePage(1);

            //新增按钮
            $("#add").on("click", function () {
                var layer = layui.layer;
                layer.open({
                    type: 2,
                    area: ['400px', '300px'],
                    content: '/base/add.html',
                    end: function () {
                        togglePage(currentPage);
                    }
                });
            });

            //批量删除按钮
            $("#deleteMulti").on('click', function () {
                if (confirm('确定要删除选中的员工吗？')) {
                    var ids = $("input[name='id']").serialize();
                    console.log(ids);
                    if (ids.length > 0) {
                        $.ajax({
                            url: "/base/emp/delete?",
                            data: ids,
                            type: 'post',
                            dataType: "JSON",
                            success: function (data) {
                                if (data && data > 0) {
                                    alert('批量删除成功');
                                    togglePage(currentPage);
                                } else {
                                    alert('批量删除失败');
                                }
                            }
                        })
                    } else {
                        alert('请先勾选需要删除的员工');
                    }
                }
            });

            $("#chooseAll").on("click", function () {
                $("input[name='id']").prop("checked", true);
            })

            $("#cancelChoose").on("click", function () {
                $("input[name='id']").prop("checked", false);
            })
        })
    </script>
</head>
<body>

<div class="layui-container">

    <button id="add" type="button" class="layui-btn">新增</button>
    <button id="deleteMulti" type="button" class="layui-btn">批量删除</button>
    <button id="chooseAll" type="button" class="layui-btn">全选</button>
    <button id="cancelChoose" type="button" class="layui-btn">取消选中</button>
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>选中</th>
            <th>id</th>
            <th>名字</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="employeesDiv">
        <!--<tr>-->
        <!--<td><input type="checkbox" name="id" value="1"></td>-->
        <!--<td>1</td>-->
        <!--<td>输入法</td>-->
        <!--<td>21</td>-->
        <!--<td>男</td>-->
        <!--<td>-->
        <!--<button type="button" class="layui-btn" onclick="updateEmp(1)">修改</button>-->
        <!--<button type="button" class="layui-btn layui-btn-danger" onclick="deleteEmp(1)">删除</button>-->
        <!--</td>-->
        <!--</tr>-->
        </tbody>
    </table>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="active"><a href="#" onclick="togglePage(1)">1</a></li>
            <li><a href="#" onclick="togglePage(2)">2</a></li>
            <li><a href="#" onclick="togglePage(2)">2</a></li>
            <li><a href="#" onclick="togglePage(2)">2</a></li>
            <li><a href="#" onclick="togglePage(2)">2</a></li>
        </ul>
    </nav>

</div>


<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script src="layui/layui.js"></script>
<script>
    layui.use(function () {
        var layer = layui.layer
            , form = layui.form
            , laypage = layui.laypage
            , element = layui.element
            , laydate = layui.laydate
            , util = layui.util;

    });
</script>
</body>
</html>
